/**
 *
 * Copyright 2016-present reading
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 *
 */
import React from 'react';
import PropTypes from 'prop-types';
import {
  StyleSheet,
  Dimensions,
  View,
  Text,
  Modal,
  TextInput,
  ActivityIndicator
} from 'react-native';

import Button from '../Button';
import LoadingView from '../LoadingView';
import colors from '../../config/colors';
import store from 'react-native-simple-store';
import ToastUtil from '../../utils/ToastUtil';
import * as types from '../../constants/ActionTypes';

const SIZES = ['small', 'large'];

const propTypes = {
  visible: PropTypes.bool,
  color: PropTypes.string,
  concelText: PropTypes.string,
  confirmText: PropTypes.string,
  teamName: PropTypes.string,
  teamId: PropTypes.any,
  teamActions: PropTypes.object.isRequired,
  user: PropTypes.object.isRequired,
  team: PropTypes.object.isRequired,
  titleText: PropTypes.string,
  size: PropTypes.oneOf(SIZES),
  overlayColor: PropTypes.string,
  onRequestClose: PropTypes.func,
  onSave: PropTypes.func,
  onCancel: PropTypes.func
};


class EditTeam extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      loading: false
    }
    this.data = {}
    this.onTeamNameChange = this.onTeamNameChange.bind(this)
    this.onConfirm = this.onConfirm.bind(this)
  }

  componentWillReceiveProps(nextProps) {
    if (nextProps.team.type === types.RESPONSE_SAVE_TEAM && 
        Object.keys(nextProps.team.saveTeamRes)
    ) {
      const { teamActions } = this.props;
      this.setState({loading: false})
      if (nextProps.team.saveTeamRes.errcode === 0) {
        // ToastUtil.showShort(nextProps.team.saveTeamRes.results);
        this.props.onSave && this.props.onSave(this.data.team_name)
      } else {
        ToastUtil.showShort(nextProps.team.saveTeamRes.errmsg);
      }
      teamActions.resetTeamType()
    }
  }

  componentWillMount () {
    this.data.team_name = this.props.teamName
    this.data.id = this.props.teamId
    this.data.parent_id = 0
    console.log(this.data, 'this.data')
    // console.log(this.props.teamActions, this.props.user, 'teamActions')
  }

  onTeamNameChange(ev) {
    if (ev && ev.nativeEvent) {
      this.data.team_name = ev.nativeEvent.text;
    }
  }

  renderLoadingView()
  {
    if (this.state.loading) {
      return (<LoadingView showText={false} />);
    }
  }

  async onConfirm () {
    if (!this.data.team_name) return ToastUtil.showShort('团队名称不能为空!');
    if (!/[\u4e00-\u9fa5]/.test(this.data.team_name)) return ToastUtil.showShort('团队名称只能是中文!');
    let team = this.data
    const { teamActions, user } = this.props;
    const token = await store.get('token');
    const siteId = await store.get('site_id');
    this.setState({loading: true})
    teamActions.requestSaveTeam(team, siteId, token)
  }

  render() {

    return (
      <View style={styles.container}>
        {this.renderLoadingView()}
        <View style={[styles.container, styles.container2]}>
          <View style={styles.formContainer}>
            
            <View style={styles.titleContainer}>
              <Text style={styles.formTextStyle}>{this.props.titleText ? this.props.titleText : '创建团队'} </Text>
            </View>

            <View style={styles.formBodyStyle}>
              <TextInput
              value={this.props.teamName}
              placeholder="请输入团队名称" 
              editable={true}
              onChange={this.onTeamNameChange}
              style={styles.inputStyle} />
            </View>

            <View style={styles.buttonContainerStyle}>
              <Button 
              onPress={() => this.props.onCancel && this.props.onCancel()}
              text={this.props.concelText ? this.props.concelText : '取消'} 
              style={[styles.textStyle, styles.cancelTextStyle]}
              containerStyle={[styles.cancelStyle, this.props.cancelStyle && this.props.cancelStyle]} />

              <Button 
              onPress={() => this.onConfirm()}
              text= {this.props.confirmText ? this.props.confirmText : '确定'} 
              style={[styles.textStyle, styles.confirmTextStyle]}
              containerStyle={[styles.confirmStyle, this.props.confirmStyle && this.props.confirmStyle]} />
            </View>
          </View>
        </View>

        <View style={[styles.container, styles.overlayStyle]}>
        </View>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    position: 'absolute',
    top: 0,
    bottom: 0,
    left: 0,
    right: 0,
    alignItems: 'center',
    zIndex: 1
  },
  container2: {
    zIndex: 3
  },
  titleContainer: {
    height: 20,
    justifyContent: 'center',
    marginTop: 20
    // backgroundColor: 'yellow'
  },
  formTextStyle: {
    color: colors.grey1,
    textAlign: 'center',
    // backgroundColor: 'blue'
  },
  overlayStyle: {
    zIndex: 2,
    backgroundColor: '#ccc',
    opacity: 0.9
  },
  formContainer: {
    width: 320,
    backgroundColor: '#ffffff',
    marginTop: '40%',
    overflow: 'hidden',
    borderRadius: 6
  },
  buttonContainerStyle: {
    flexDirection: 'row',
    marginTop: 10
  },
  cancelStyle: {
    flex: 1,
    justifyContent: 'center',
    backgroundColor: 'white',
    height: 40, 
    borderTopWidth: 1,
    borderColor: colors.grey8
  },
  confirmStyle: {
    flex: 1,
    height: 40,
    justifyContent: 'center',
    backgroundColor: colors.blue4,
    borderTopWidth: 1,
    borderColor: colors.blue4
  },
  textStyle: {
    textAlign: 'center'
  },
  confirmTextStyle: {
    color: 'white'
  },
  cancelTextStyle: {
    color: colors.grey6
  },
  formBodyStyle: {
    padding: 10,
    minHeight: 60,
    // backgroundColor: 'red',
    justifyContent: 'center'
  },
  inputStyle: {
    borderWidth: 0.5,
    borderColor: colors.grey7,
    padding: 10
  }
});

EditTeam.propTypes = propTypes;

EditTeam.defaultProps = {
  visible: false,
  color: 'white',
  size: 'large',
  overlayColor: 'transparent',
  onRequestClose() {}
};


export default EditTeam;
